<template>
	
	<h3>星标邮件（收藏夹）</h3>
	<el-divider />
	
	<el-table :data="subinbox" 
	          :default-sort="{ prop: 'time', order: 'ascending' }" 
			  stripe 
			  border 
			  fit
			  empty-text="暂时没有星标邮件"
			  @selection-change="handleSelectionChange"
			  style="width: 100%">
		<el-table-column type="selection" width="55" />
	    <el-table-column prop="sender" label="发件人" width="100" />
	    <el-table-column prop="title" label="主题" width="250" />
	    <el-table-column prop="time" label="收信时间" />
		<el-table-column>
			<template #default="scope">
				<el-button @click="openEmail(scope.row)">
				    查看详情
				</el-button>
				
				<el-button @click="cancelSign(scope.row.id)">
				    <el-icon><Flag /></el-icon>
				</el-button>
				<el-button @click="saveDelete(scope.row.id)">
			        <el-icon><Delete /></el-icon>
			    </el-button>
			</template>
		</el-table-column>
	  </el-table>


<el-row>
	<el-col :span="8"></el-col>
	<el-col :span="16">
	  <el-pagination 
	  background layout="prev, pager, next" 
	  :page-size="pageSize" 
	  :total="inbox.length" 
	  @current-change="doPaging"
	  />
	</el-col>
</el-row>
 
 
 <!-- 查看邮件对话框 -->
 <el-dialog v-model="emailDialogFormVisble" title="邮件详情">
 		  <el-form
 		  :label-position="labelPosition"
 		  label-width="100px"
 		  style="max-width: 350px;margin: 0px auto;"
 		  >
 		  <el-form-item label="发件人:">
 			  {{checkEmail.sender}}
 		  </el-form-item>
 		  <el-form-item label="主题:">
 			  {{checkEmail.title}}
 		  </el-form-item>
 		  <el-form-item label="正文:">
 			  {{checkEmail.main}}
 		  </el-form-item>
 		      <el-button @click="emailDialogFormVisble=false">关闭</el-button>
 			  
 			  
 		  </el-form>
 		  
 </el-dialog>
 
 
 

</template>

<script>
	import { ElMessage } from 'element-plus'
    export default {
		data(){
			return {
				news:[],
				inbox:[],
				subinbox:[],
				emailsidArr:[],
				pageSize:4,
				emailDialogFormVisble:false,
				checkEmail:{}
			}
		},
		methods: {
			//显示数据库内容
			getSQL(){
				let that=this
				this.$axios.get("http://localhost:8080/inbox/signlist").then(function(res){
						that.inbox=res.data
						//默认第一页
						that.subinbox=that.inbox.slice(0,that.pageSize)
					})
			},
			
			//分页
			doPaging(curr){
				//根据当前页 推算显示第几到第几行数据
				let start=(curr-1)*this.pageSize
				let end=curr*this.pageSize
				this.subinbox=this.inbox.slice(start,end)
				
			},
			cancelSign(eid){
				let that=this
				this.$axios.get("http://localhost:8080/inbox/cancelsign",{
					params:{
						emailid:eid
					}
				}).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '标记已取消！',
						    type: 'success',
						  })
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('标记失败！')
					}
					
				})
				
			},
			openEmail(row){
				this.checkEmail=row
				this.emailDialogFormVisble=true
				
			},
			//删除单个数据
			saveDelete(eid){
				let that=this
				this.$axios.get("http://localhost:8080/inbox/delete",{
					params:{
						emailid:eid
					}
				}).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '删除成功！',
						    type: 'success',
						  })
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('删除失败！')
					}
					
				})
			},
			
			//多选框
			handleSelectionChange(arr){
				this.emailsidArr=arr
			},
			//批量删除
			emailsDelete(){
				let arr=[]
				for(let i=0;i<this.emailsidArr.length;i++)
				{
					arr.push(this.emailsidArr[i].id)
				}
				this.$axios.get("http://localhost:8080/inbox/deletes?arr"+arr).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '删除成功！',
						    type: 'success',
						  })
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('修改失败！')
					}
					
				})
			}
			
		},
		created(){
			this.getSQL()

		}
		
	}

</script>

<style>
	h3 {
		text-align: left;
		margin-top:0px;
		
	}
	
	
</style>
